/* book-list.component.css */
.book-list-container {
  padding: 20px;
  background-color: #fff;
}

.page-header {
  display: flex;
  flex-wrap: wrap; /* Allows buttons to wrap to the next line on smaller screens */
  align-items: center;
  margin-bottom: 20px;
}



.performance-metrics {
  margin: 10px 0;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  flex-basis: 100%; /* Ensures metrics section takes full width */
  margin-bottom: 20px;
}

.performance-metrics h3 {
  margin: 0 0 10px 0;
  color: #409EFF;
}

.metric-item {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-item .metric-label {
  color: #909399;

}

.metric-item .metric-value {
  color: #606266;
  font-weight: bold;
}

.id-key-btn {
  display: flex;
  flex-wrap: wrap; /* Allows buttons to wrap */
  gap: 8px; /* Spacing between buttons */
  margin-top: 10px;
}

/* Remove individual button margin if using gap on parent */
.id-key-btn button {
  margin-right: 0px;
}

.module-info {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.info-icon {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.info-icon i {
  color: #909399;
  margin-right: 5px;
}

.info-icon span {
  color: #606266;
  font-size: 14px;
}

.info-text {
  color: #606266;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.book-table {
  margin-top: 20px;
}

.expand-button {
  color: #409EFF;
  padding: 0;
}

/* Style for Ng-Zorro icon within the expand button */
.expand-button i.anticon {
  transition: transform 0.3s ease;
  display: inline-block; /* Required for transform to work correctly */
}

.expand-button i.anticon.expanded {
  transform: rotate(90deg);
}

.book-info {
  padding: 5px 0;
}

.book-title {
  font-weight: 500;
  color: #303133;
}

.book-detail {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.detail-item {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item .label {
  color: #909399;
  margin-right: 8px;
}

.detail-item .value {
  color: #606266;
}

.detail-item .value.description {
  display: block;
  margin-top: 4px;
  white-space: pre-wrap;
}

.academic-test-list {
  display: block;
  border: 1px dashed #ccc;
  padding: 10px;
  margin-top: 20px;
}

/* Adjust Ng-Zorro table cell padding for better alignment */
.ant-table-small .ant-table-tbody > tr > td {
  padding: 8px 8px; /* Adjust as needed for compact rows */
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
}